<template>

<!-- 	<view class="title" @tap="tapButt" @touchend="touchEnd()" @touchstart="touchStart()" :style="{backgroundColor:bgc,width:`${width}rpx`,height:`${height}rpx`,lineHeight:`${height}rpx`,transform: `scale(${zoom});` }"
	 style=" transition: background-color 0.2s; font-weight: 800; color: #FFFFFF; text-align: center; box-shadow: 0 0 5rpx #C3E8FF; border-radius: 15rpx; height: 80rpx; background-color: #33B0FF;">
		{{content}}
	</view> -->
	
	<view class="title" @tap="tapButt" hover-stay-time="50" hover-class="hover" :style="{backgroundColor:bgc,width:`${width}rpx`,height:`${height}rpx`,lineHeight:`${height}rpx`,}"
	 style=" transition: background-color 0.2s; font-weight: 800; color: #FFFFFF; text-align: center; box-shadow: 0 0 5rpx #C3E8FF; border-radius: 15rpx; height: 80rpx; background-color: #33B0FF;">
		{{content}}
	</view>

</template>

<script>
	export default {
		props: {
			content: {
				default: '提交'
			},
			type: {
				default: 'primary'
			},
			height: {
				default: 80
			},
			width: {
				default: 140
			},
			bgc: {
				default: '#33B0FF'
			}
		},
		data() {
			return {
				color: '#95A3AB',
				text: '',
				zoom: 1,
			}
		},
		computed: {
			title: {
				get() {
					return this.content
				},
				set() {
					console.log('123');
				}
			}
		},
		methods: {
			touchStart() {
				this.zoom = 0.97
				this.title = "你好"
			},
			touchEnd() {
				this.zoom = 1
			},
			tapButt(e) {
				this.$emit('clickButt', e)
			}
		}
	}
</script>

<style>
	.hover{
		transform: scale(0.97);
		filter: grayscale(18%)
	}
	.button {
		transition: transform 0.1s;
	}
</style>
